<!--
 * @Author: Vben
 * @Description: logo component
-->
<template>
<!--  anticon-->
  <div  :class="getAppLogoClass" @click="goHome" :isLogin="props.isLogin">
<!--    <div class="img_back">-->
<!--    </div>-->
    <img src="../../../assets/images/logo.png" />
    <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle" :style="dynamicStyles">
      {{ title }}
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed, unref,onMounted,ref } from 'vue';
  import { useGlobSetting } from '@/hooks/setting';
  import { useGo } from '@/hooks/web/usePage';
  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
  import { useDesign } from '@/hooks/web/useDesign';
  import { PageEnum } from '@/enums/pageEnum';
  import { useUserStore } from '@/store/modules/user';

  const props = defineProps({
    /**
     * The theme of the current parent component
     */
    theme: { type: String, validator: (v: string) => ['light', 'dark'].includes(v) },
    /**
     * Whether to show title
     */
    showTitle: { type: Boolean, default: true },
    /**
     * The title is also displayed when the menu is collapsed
     */
    alwaysShowTitle: { type: Boolean },

    isLogin: { type: Boolean, default: false },//区分登录页和其他页面
  });

  const { prefixCls } = useDesign('app-logo');
  const { getCollapsedShowTitle } = useMenuSetting();
  const userStore = useUserStore();
  const { title } = useGlobSetting();
  const go = useGo();
  // const dynamicStyles =computed(()=>{
  //   color:props.isLogin?"white":"gray"
  // })
  const dynamicStyles = ref({
    color:"white"
  })
  //!!userStore.token userStore.token?true:false
  const getAppLogoClass = computed(() => [
    prefixCls,
    props.theme,
    { 'collapsed-show-title': unref(getCollapsedShowTitle) },
    { 'anticon':!props.isLogin}
  ]);

  onMounted(()=>{
  // console.log("--props.isLogin",props.isLogin);
   if(!props.isLogin){
     dynamicStyles.value.color="gray";
   }else{
     dynamicStyles.value.color="white";
   }
  })

  const getTitleClass = computed(() => [
    `${prefixCls}__title`,
    {
      'xs:opacity-0': !props.alwaysShowTitle,
    },
  ]);

  function goHome() {
    go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
  }
</script>
<style lang="less" scoped>
  .anticon{
    background: #ffffff;

  }
  .img_back{

  }
  @prefix-cls: ~'@{namespace}-app-logo';

  .@{prefix-cls} {
    display: flex;
    align-items: center;
    padding-left: 7px;
    transition: all 0.2s ease;
    cursor: pointer;

    &.light {
      border-bottom: 1px solid @border-color-base;
    }

    &.collapsed-show-title {
      padding-left: 20px;
    }

    &.light &__title {
      color: @primary-color;
    }

    &.dark &__title {
      color: @white;
    }

    &__title {
      transition: all 0.5s;
      font-size: 16px;
      font-weight: 700;
      line-height: normal;
    }
  }
</style>
